<template>
	<view>
		<!-- <PersonalEquallyNav :nav="navList"></PersonalEquallyNav> -->
		<view class="form_split_10"></view>
		<u-empty image="search" description="没有找到对应的信息" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<scroll-view scroll-y="true" style="height: calc(100vh - 102rpx);" @scrolltolower="scrolltolower">
					<view v-for="(item, index) in itemList" :key="index" @click="toDetail(item.company_id)">
						<view class="box_item">
							<view class="txt_wrapper">
								<view class="logo_box">
									<image :src="item.logo_src" :alt="item.companyname"></image>
								</view>
								<view class="tx1">
									<view class="name">{{ item.companyname }}</view>
									<view class="auth_ico" v-if="parseInt(item.company_audit) === 1"></view>
									<view class="clear"></view>
								</view>
								<view class="tx2">{{ item.district_text }}</view>
								<view class="tx4">
									{{ item.scale_text }} · {{ item.trade_text }} · {{ item.nature_text }}
								</view>
							</view>
							<view class="tx3">
								热招：
								<text class="job">{{ item.first_jobname }}</text>
								等{{ item.jobnum }}个岗位
								<u-button class="right_btn" shape="circle" type="primary" size="mini" plain
									color="#1787fb" @click.stop="openCancelModal(item.id)">
									取消关注
								</u-button>
							</view>
						</view>
						<view class="form_split_10"></view>
					</view>
				</scroll-view>
				<u-loadmore class="u-loadmore" v-if="isLoadmore" :status="finished_status" />
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="cancelModalState" title="提示" content="确定取消关注该企业吗" show-cancel-button
			@confirm="cancelAttention"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import PersonalEquallyNav from '@/components/PersonalEquallyNav'

	export default {
		name: 'AttentionCompany',
		components: {
			PersonalEquallyNav
		},
		data() {
			return {
				isLoadmore: false,
				cancelModalState: false, // 取消收藏模态框状态
				cancelId: '', // 取消收藏企业id
				page: 1,
				pagesize: 15,
				itemList: [],
				finished_status: 'loadmore',
				show_empty: false,
				navList: [{
						text: '职位收藏夹',
						href: '/personal/JobManagement/JobFavorites',
						active: 0
					},
					{
						text: '关注的企业',
						href: '/personal/JobManagement/AttentionCompany',
						active: 1
					}
				]
			}
		},
		created() {
			this.getData(true)
		},
		methods: {
			scrolltolower() {
				this.isLoadmore = true
				this.page++
				this.getData(false)
			},
			/**
			 * 获取数据
			 */
			getData(init) {
				this.show_empty = false
				if (init === true) {
					this.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.personal_manage_attention_company, {
						page: this.page,
						pagesize: this.pagesize
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							if (init === true) {
								this.itemList = [...res.data.data.items]
							} else {
								this.itemList = this.itemList.concat(res.data.data.items)
							}

							// 数据全部加载完成
							if (res.data.data.items.length < this.pagesize) {
								this.finished_status = 'nomore'
								if (init === false) {
									this.finished_status = 'nomore'
								} else if (res.data.data.items.length === 0) {
									this.show_empty = true
								}
							}
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			/**
			 * 跳转详情页
			 * @param id 企业id
			 */
			toDetail(id) {
				uni.navigateTo({
					url: '/commonViews/CompanyShow?id=' + id
				})
			},
			/**
			 * 取消关注企业
			 * @param id
			 */
			openCancelModal(id) {
				this.cancelModalState = true
				this.cancelId = id
			},
			cancelAttention() {
				// 确定按钮
				http
					.post(api.personal_manage_attention_company_cancel, {
						id: this.cancelId
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.itemList = this.itemList.filter(item => {
								return parseInt(item.id) !== parseInt(this.cancelId)
							})
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 34rpx 32rpx 0;

			.txt_wrapper {
				position: relative;
				padding-left: 148rpx;

				.logo_box {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
					width: 120rpx;
					height: 120rpx;
					font-size: 20rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border: 0;
					}
				}
			}

			.tx4 {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 520rpx;
				margin-bottom: 22rpx;
			}

			.tx3 {
				position: relative;
				width: 100%;
				border-top: 2rpx solid #fafafa;
				padding: 30rpx 170rpx 30rpx 0;
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.job {
					color: #1787fb;
				}

				.right_btn {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					padding: 0 26rpx;
				}
			}

			.tx2 {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 520rpx;
				margin-bottom: 14rpx;
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					float: left;
					max-width: 440rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.auth_ico {
					float: left;
					margin-left: 14rpx;
					width: 62rpx;
					height: 44rpx;
					background-image: url($ImgUrl + "tip_ico_auth.png");
					background-repeat: no-repeat;
					background-position: 0 8rpx;
					background-size: 62rpx 32rpx;
				}
			}
		}
	}
</style>
